{{#>base title=data.page.echarts_map}}

    {{#*inline "pageContent"}}

        <div class="row">
            <div class="col-md-12">
                <h3 class="page-title">
                    {{data.page.echarts_map}}
                </h3>
                <div class="tabs-wrap">
                    <ul  class="nav nav-tabs">
                        <li  class="active">
                            <a href="echarts-map-world.html" >世界</a>
                        </li>
                        <li>
                            <a href="echarts-map-china.html" >中国</a>
                        </li>
                        <li>
                            <a href="echarts-map-china-city.html" >中国-城市</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- BEGIN PAGE CONTENT-->
        <div class="row">
            <div class="col-md-12">

                <div class="portlet box default">

                    <div class="portlet-body">
                        <div  class="chart-default " >
                            <div class="chart-body chart-map" id="my_chart"></div>
                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="markdown">
                    <h3>Javascript</h3>
    <pre><code class="javascript">require('../../plugins/echarts/module');
    var chart = $p.echarts("my_chart", {
        type: "map",
        title: {
            text: "浏览量（PV）地域分布图"
        }
    });

    chart.load({
        name: "pv",
        mapType: "world",
        data: [{
            value: 735,
            name: 'geo.country.china'
        }, {
            value: 423,
            name: 'United States of America'
        }, {
            value: 310,
            name: 'geo.country.italy'
        }, {
            value: 300,
            name: '俄罗斯'
        }]
    });</code></pre>

                    {{>fixtures/echarts-footer}}

                </div>
            </div>
        </div>
        <!-- END PAGE CONTENT-->
    {{/inline}}

    {{#*inline "appScript"}}
        <script type="text/javascript">

            pagurian.call([
                "modules/echarts-map/app",
                "plugins/echarts/loader-map"
            ], function(app) {
                app.page.world();
            });

        </script>
    {{/inline}}

{{/base}}
